<script setup>

import {computed, onMounted, ref, watch} from "vue";

const props = defineProps({
  cron: {
    type: Object,
    default: ({})
  },
  check: {
    type: Function,
    required: true
  }
})
const emit = defineEmits(['update']);

const fullYear = ref(0)
const radioValue = ref(1);
const cycle01 = ref(0);
const cycle02 = ref(0);
const avg01 = ref(0)
const avg02 = ref(1);
const checkboxList = ref([]);
const checkNumber = props.check;

const cycleTotal = computed(() => {
  const c1 = checkNumber(cycle01.value, fullYear.value, 2098)
  const c2 = checkNumber(cycle02.value, c1 ? c1 + 1 : fullYear.value + 1, 2099)
  return `${c1}-${c2}`;
})

const avgTotal = computed(() => {
  const a1 = checkNumber(avg01.value, fullYear.value, 2098);
  const a2 = checkNumber(avg02.value, 1, 2099 - a1 || fullYear.value);
  return `${a1}/${a2}`;
})

const checkboxString = computed(() => {
  if (checkboxList.value.length === 0) return '*'
  return checkboxList.value.join(',')
})

const onRadioChange = () => {
  switch (radioValue.value) {
    case 1:
      emitUpdate( '', 'year');
      break;
    case 2:
      emitUpdate( '*', 'year');
      break;
    case 3:
      emitUpdate(cycleTotal.value, 'year');
      break;
    case 4:
      emitUpdate(avgTotal.value, 'year');
      break;
    case 5:
      emitUpdate(checkboxString.value,'year');
      break;
  }
}

// 通用更新函数
const emitUpdate = (value, type) => {
  emit('update', type, value, type) // 如：'min', '1-5', 'min'
}

watch(radioValue, onRadioChange)
watch([cycle01, cycle02], onRadioChange)
watch([avg01, avg02], onRadioChange)
watch(checkboxList, onRadioChange, {deep: true})

onMounted(() => {
  fullYear.value = Number(new Date().getFullYear());
  cycle01.value = fullYear.value;
  avg01.value = fullYear.value;
})

defineExpose({
  cycle01,
  cycle02,
  avg01,
  avg02,
  checkboxList,
  radioValue
})
</script>

<template>
  <el-form class="demo-form-inline">
    <el-form-item>
      <el-radio v-model="radioValue" :value="1">
        不填，允许的通配符[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :value="2" v-model='radioValue'>
        每年
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :value="3" v-model='radioValue'>
        周期从
        <el-input-number v-model='cycle01' :min='fullYear' :max="2098"/> -
        <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : fullYear + 1" :max="2099"/>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :value="4" v-model='radioValue'>
        从
        <el-input-number v-model='avg01' :min='fullYear' :max="2098"/> 年开始，每
        <el-input-number v-model='avg02' :min="1" :max="2099 - avg02 || fullYear"/> 年执行一次
      </el-radio>

    </el-form-item>

    <el-form-item>
      <el-radio :value="5" v-model='radioValue'>
        指定
        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="8">
          <el-option v-for="item in 9" :key="item" :value="item - 1 + fullYear" :label="item -1 + fullYear" />
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
